<template>
        <div id="Home">
<!--            顶栏-->
            <nav-bar>
                <template v-slot:default>图书商城</template>
            </nav-bar>
            <TabControl  v-show="isTabFixed" @tabClick = "tabClick" :titles="['畅销','新书','精选']"></TabControl>
            <div class="wrapper">
                <div class="content">

                    <div ref="banref">
                        <HomeSwiper :banners="banners"></HomeSwiper>

                        <Recommend-View :recommends="recommends"></Recommend-View>
                        <van-search
                                v-model="value"
                                shape="round"
                                background="#4fc08d"
                                placeholder="请输入搜索关键词"
                        />
                    </div>

                    <TabControl @tabClick = "tabClick" :titles="['畅销','新书','精选']"></TabControl>
<!--                    图书列表-->
                    <GoodsList :goodsShow="goodsShow"></GoodsList>
                </div>
            </div>
            <backTop v-show="isbackTop" @bTop="bTop"></backTop>
        </div>
</template>

<script>
    import HomeSwiper from "./ChildComps/HomeSwiper";
    import TabControl from "../../components/content/TabControl/TabControl";
    import NavBar from "../../components/common/navbar/NavBar";
    import RecommendView from "./ChildComps/RecommendView";
    import {getHomeAllData,getHomeGoods} from "../../network/home";
    import {ref,reactive,onMounted,computed,watchEffect,nextTick} from 'vue';
    import GoodsList from "../../components/content/Goods/GoodsList";
    import BScoll from"better-scroll"
    import backTop from "../../components/common/backTop/backTop";
    export default {
        name: "Home",
        data(){
          return{
              value:''
          }
        },
        setup(){
            let banref=ref(null);
            let  isTabFixed =ref(false);
            let isbackTop = ref(false);
            //声明滚动效果BetterScroll对象
            let bscroll =reactive({});
            const recommends =ref([]);

            //商品列表数据模型
            const goods =reactive({
                sales:{page:1,list:[]},
                new:{page:1,list:[]},
                recommend:{page:1,list:[]},
            });
            let banners=ref([]);
            //onMounted开始
            onMounted(()=>{
               // console.log(recommends);
                //########获取数据#########
                getHomeAllData().then(res=>{
                    recommends.value=res.goods.data;
                    banners.value=res.slides;
                });
                getHomeGoods('sales').then(res=>{
                   goods.sales.list=res.goods.data;
                });
                getHomeGoods('recommend').then(res=>{
                    goods.recommend.list=res.goods.data;
                });
                getHomeGoods('new').then(res=>{
                    goods.new.list=res.goods.data;
                });

                // #######实现滚动效果#######

                //创建滚动效果BetterScroll对象
                bscroll =new BScoll('.wrapper',{
                    mouseWheel: true,//开启鼠标滚轮
                    // disableMouse: false,//启用鼠标拖动
                    // disableTouch: false,//启用手指触摸
                    click:true,
                    probeType:3,
                    pullUpLoad:true

                });
                //触发滚动事件
                bscroll.on('scroll',(position)=>{
                    isbackTop.value=isTabFixed.value =(-position.y)>banref.value.offsetHeight
                });
                //触发事件 上拉加载数据，拉到底pullingUp
                bscroll.on('pullingUp',()=>{
                    // bscroll.refresh();
                    const page=goods[currentType.value].page+1;

                    getHomeGoods(currentType.value,page).then(res=>{
                        goods[currentType.value].list.push(...res.goods.data)
                        goods[currentType.value].page+=1;
                    });
                    //完成上拉，等数据完成请求，将数据展示出来
                    bscroll.finishPullUp();
                    //console.log('高度'+document.querySelector('.content').clientHeight)
                    //console.log('当前类型'+currentType.value+'当前页数'+page);
                    //重新计算高度
                    bscroll.refresh();

                })
            });

            //onMounted结束onMounted结束onMounted结束onMounted结束
            // ##############获取商品数据展示###############
            //设置选项卡类型，默认给sales
            let currentType=ref('sales');
            //切换Goods响应，点击获取当前选项卡的数组，选项卡通过index匹配对应的类型
            const tabClick=(index)=>{
                let types=['sales','new','recommend'];
                currentType.value=types[index];
                //重新计算高度
                nextTick(()=>{
                    bscroll && bscroll.refresh();
                })
            };
            //设置计算方法，将goods[类型].list的值返回到goodsShow中，再传值到子组件中展示
            const goodsShow=computed(()=>{
                return goods[currentType.value].list;
            });
            //监听.......任何一个变量有变量
            watchEffect(()=>{
                nextTick(()=>{
                    //重新计算高度
                    bscroll && bscroll.refresh();
                })
            });
            //返回顶部
            const bTop=()=>{
                bscroll.scrollTo(0,0,300)
            };
            return{
                banners,
                recommends,
                tabClick,
                goodsShow,
                banref,
                isTabFixed,
                isbackTop,
                bTop,
            }
        },
        components:{
            GoodsList,
            NavBar,
            RecommendView,
            TabControl,
            backTop,
            HomeSwiper

        }
    }
</script>

<style scoped>
    #Home{
        height: 100vh;
        position: relative;
    }
    .wrapper{
        position: absolute;
        top:45px;
        bottom: 50px;
        left: 0;
        right: 0;
        overflow: hidden;
    }
    .content{

    }
.banner img {
    width: 100%;
    height: 100%;

}
</style>